// This file is a place for component styles that are too few for their own file
// and don't make sense in any of the existing files

.closeIcon {
  position: relative;
  width: 24px;
  height: 24px;

  span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-25%, -25%);
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.trumbowyg .trumbowyg-editor {
  height: auto !important;
  padding: 10px;
  /* gross hack to stop trumbowyg from setting inline height to huge numbers when external
  images are added */
}

.copyNotification {
  font-weight: bold;
  font-size: $baseFontSize;
  margin-left: $padMd;
  padding: $padSm;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

.copyNotification.active {
  opacity: 1;
  pointer-events: auto;
}

.ratingStrip {
  display: inline-flex;

  .ratingIcons {
    display: inline-flex;
    flex-direction: row-reverse;

    .ratingIcon {
      opacity: 0.4;
      pointer-events: none;

      .emoji {
        margin-right: 0.3em;
      }

      &.clickable {
        pointer-events: auto;
      }

      &.selected {
        opacity: 1;
      }

      &:hover {
        opacity: 1;

        & ~ * {
          opacity: 1;
        }
      }
    }
  }
}

.emoji {
  height: 1em;
  width: 1em;

  &.fade {
    opacity: .35;
  }
}

// This could probably go into an animations components file once we have a couple
.fadeIn {
  @include fadeIn(1s ease);
}

.reportBtn {
  &:focus {
    outline: none;
  }

  .reportBtnShell {
    &:focus {
      outline: none;
    }

    .reported {
      pointer-events: none;
    }
  }
}

.quantityDisplay {
  position: relative;
  display: inline-block;

  // Dimensions will probably need to be adjusted if your spinner and/or alert icon vary from
  // the defaults. If you need to change these, please override somewhere else as other places
  // are likely using these defaults.
  min-width: 20px;
  min-height: 13px;

  .spinner {
    position: absolute;
    top: 0;
    left: 0;
  }
}
